<template>
  <div class="evaluate item">
    <div class="title after" style="line-height: 40px">
      <div class="search after">
        <div class="note f-l mr-10">注 : 日期搜索为 "考评时间"</div>
        <el-date-picker
          v-model="search.time"
          size="small"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="mr-5"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-select
          v-model="search.street_id"
          placeholder="请选择街道"
          filterable
          size="small"
          clearable
          v-if="user.type == 0 || user.type == 1 || user.type == 2"
          class="mr-5"
        >
          <el-option :value="item.id" :label="item.title" :key="item.id" v-for="item in streetList"></el-option>
        </el-select>

        <el-select v-model="search.state" placeholder="请选择状态" filterable size="small" clearable class="mr-5">
          <el-option label="未提交" :value="0" v-if="user.type != 2 && user.type != 3 && user.type != 4"></el-option>
          <el-option label="村(整改+初审)" :value="1" v-if="user.type != 2"></el-option>
          <el-option label="街道(初审)" :value="2" v-if="user.type != 2"></el-option>
          <el-option label="不通过(初审)" :value="3" v-if="user.type != 2"></el-option>
          <el-option label="街道(终审)" :value="4" v-if="user.type != 2"></el-option>
          <el-option label="考评员(终审)" :value="5" v-if="user.type != 2"></el-option>
          <el-option label="审核员(终审)" :value="6"></el-option>
          <el-option label="不通过(终审)" :value="7"></el-option>
          <el-option label="已结束" :value="8"></el-option>
        </el-select>
        <el-input
          v-model="search.value"
          size="small"
          style="width: 370px"
          placeholder="标题、村名称、街道名称、街道管理员、考评员、审核员"
          @keyup.enter.native="
            searchHandle();
            page.current = 1;
          "
          class="input"
        ></el-input>
        <el-button
          size="small"
          type="primary"
          @click="
            searchHandle();
            page.current = 1;
          "
          class="button"
          >搜索</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="$router.push({ path: '/evaluate/add?type=3' })"
          class="button"
          v-if="user.type == 1 || user.type == 0"
          >添加考评</el-button
        >
      </div>
    </div>
    <div class="list">
      <el-table ref="selects" :data="list" @selection-change="change" v-loading="loading">
        <el-table-column type="selection" width="45" v-if="user.type == 1 || user.type == 0"></el-table-column>
        <el-table-column type="expand" width="45">
          <template slot-scope="props">
            <ul class="details after">
              <li>
                <p>年份</p>
                <p>{{ props.row.year }}</p>
              </li>

              <li>
                <p>考评员</p>
                <p>{{ props.row.user_name }}</p>
              </li>
              <li>
                <p>考评时间</p>
                <p>{{ props.row.time }}</p>
              </li>
              <li>
                <p>审核员</p>
                <p>{{ props.row.auditor_name }}</p>
              </li>
              <li>
                <p>街道管理员</p>
                <p>{{ props.row.street_user_name }}</p>
              </li>
              <li>
                <p>村管理员</p>
                <p>{{ props.row.village_user_name }}</p>
              </li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="期数" prop="period"></el-table-column>
        <el-table-column label="街道" prop="street_name"></el-table-column>
        <el-table-column label="村" prop="village_name"></el-table-column>
        <el-table-column label="整改限时" width="120">
          <template slot-scope="scope">
            <span :style="{ color: timeout(scope.row) ? '#f40' : '' }">{{ scope.row.expire_time }}</span>
            <span class="edit-time" v-if="user.type == 0 || user.type == 1">
              <i
                class="fa fa-pencil"
                @click="
                  time.show = true;
                  time.value = scope.row.expire_time;
                  time.active = { ...scope.row };
                "
              ></i>
            </span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="150">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.state == 0">未提交</el-tag>
            <el-tag type="danger" v-if="scope.row.state == 1">村(整改+初审)</el-tag>
            <el-tag type="danger" v-if="scope.row.state == 2">街道(初审)</el-tag>
            <el-tag type="danger" v-if="scope.row.state == 3">不通过(初审)</el-tag>
            <el-tag type="danger" v-if="scope.row.state == 4">街道(终审)</el-tag>
            <el-tag type="danger" v-if="scope.row.state == 5">考评员(终审)</el-tag>
            <el-tag type="danger" v-if="scope.row.state == 6">审核员(终审)</el-tag>
            <el-tag type="danger" v-if="scope.row.state == 7">不通过(终审)</el-tag>
            <el-tag type="success" v-if="scope.row.state == 8">已结束</el-tag>

            <span class="edit-time f-r" v-if="user.type == 0 || user.type == 1">
              <i
                class="fa fa-pencil"
                @click="
                  state.show = true;
                  state.value = scope.row.state;
                  state.active = { ...scope.row };
                "
              ></i>
            </span>
          </template>
        </el-table-column>
        <!-- 实际50% -->
        <el-table-column label="实地得分" v-if="user.type != 3 && user.type != 4">
          <template slot-scope="scope">{{ scope.row.scene_score }} 分</template>
        </el-table-column>
        <!-- 实际50% -->
        <el-table-column label="整改得分" v-if="user.type != 3 && user.type != 4">
          <template slot-scope="scope">{{ scope.row.change_score }} 分</template>
        </el-table-column>
        <el-table-column label="总得分" v-if="user.type != 3 && user.type != 4">
          <template slot-scope="scope">
            <score :score="scope.row.total_points" :item="scope.row"></score>
          </template>
        </el-table-column>
        <el-table-column label="问题/整改">
          <template slot-scope="scope">{{ scope.row.issue_count }} / {{ scope.row.issue_pass_count }}</template>
        </el-table-column>

        <el-table-column label="问题">
          <template slot-scope="scope">
            <span @click="setDownloadTime(scope.row, 0)" v-if="!scope.row.download_time">
              <el-link type="primary" :href="'/admin/Index/download_issue?id=' + scope.row.id + '&type=' + user.type" target="_blank">下 载</el-link>
            </span>
            <el-tooltip effect="dark" :content="'时间 : ' + scope.row.download_time" placement="top" v-else>
              <el-link type="danger" :href="'/admin/Index/download_issue?id=' + scope.row.id" target="_blank">已下载</el-link>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column label="下载和筛选">
          <template slot-scope="scope">
            <issue-show :item="scope.row"></issue-show>
          </template>
        </el-table-column>

        <el-table-column label="检查状态" v-if="user.type == 0">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.check_state"
              active-color="#409EFF"
              inactive-color="#EAECF0"
              @change="checkStateChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-button size="small" @click="$router.push({ path: '/evaluate/edit', query: { id: scope.row.id } })">编 辑</el-button>
            <el-button size="small" type="danger" @click="del([scope.row])" v-if="user.type == 1 || user.type == 0">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <div class="action after">
        <div class="left after">
          <el-button @click="checkAll" size="small" v-if="user.type == 1 || user.type == 0">全选</el-button>
          <el-button @click="del(checkList)" size="small" type="danger" v-if="user.type == 1 || user.type == 0">删除选中项</el-button>
          <!-- 只有管理员才能导出 -->
          <el-button @click="exportEvaluate" size="small" v-if="user.type == 0" class="mr-10" type="primary">导出考评</el-button>
          <div class="note d-s-i">注 : "整改限时" 为红色时,说明整改超时</div>
        </div>
        <div class="right">
          <el-pagination
            layout="total,prev, pager, next"
            :total="page.count"
            :page-size="page.size"
            @current-change="pageChange"
            :current-page="page.current"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!-- 修改整改限时 -->
    <el-dialog title="修改限时" :visible.sync="time.show" width="400px">
      <div class="body">
        <el-date-picker
          v-model="time.value"
          type="date"
          placeholder="请选择时间"
          style="width: 100%"
          size="small"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="time.show = false" size="small">取 消</el-button>
        <el-button type="primary" @click="timeSubmit()" size="small">提 交</el-button>
      </span>
    </el-dialog>

    <!-- 下载 -->
    <el-dialog title="管理员下载" :visible.sync="download.show" width="400px">
      <div class="body">
        <el-form>
          <el-form-item label="下载 : " label-width="100px" style="margin-bottom: 0">
            <span @click="setDownloadTime(download.active, 1)" v-if="!download.active.admin_download_time">
              <el-link
                type="primary"
                :href="'/admin/Index/download_issue?admin=1&id=' + download.active.id + '&type=' + user.type"
                target="_blank"
                :underline="false"
                >下 载</el-link
              >
            </span>
            <el-tooltip effect="dark" :content="'时间 : ' + download.active.admin_download_time" placement="top" v-else>
              <el-link type="danger" :href="'/admin/Index/download_issue?id=' + download.active.id" target="_blank" :underline="false"
                >已下载</el-link
              >
            </el-tooltip>
          </el-form-item>
          <el-form-item label="整改未通过 : " label-width="100px" style="margin-bottom: 0" v-if="download.active.state > 3">
            <el-link
              type="primary"
              :href="'/admin/Index/download_issue_error?id=' + download.active.id + '&type=0'"
              target="_blank"
              :underline="false"
              >下 载 ({{ download.active.issue_sum_after_no_pass }})</el-link
            >
          </el-form-item>
          <el-form-item label="未整改 : " label-width="100px" style="margin-bottom: 0">
            <el-link
              type="primary"
              :href="'/admin/Index/download_issue_error?id=' + download.active.id + '&type=1'"
              target="_blank"
              :underline="false"
              >下 载 ({{ download.active.issue_sum_before - download.active.issue_sum_after - download.active.issue_sum_after_no_pass }})</el-link
            >
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="download.show = false" size="small">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 修改状态 -->
    <el-dialog title="修改状态" :visible.sync="state.show" width="400px">
      <div class="body">
        <el-select v-model="state.value" placeholder="请选择状态" filterable size="small" class="mr-5" style="width: 100%">
          <el-option label="未提交" :value="0"></el-option>
          <el-option label="村(整改+初审)" :value="1"></el-option>
          <el-option label="街道(初审)" :value="2"></el-option>
          <el-option label="不通过(初审)" :value="3"></el-option>
          <el-option label="街道(终审)" :value="4"></el-option>
          <el-option label="考评员(终审)" :value="5"></el-option>
          <el-option label="审核员(终审)" :value="6"></el-option>
          <el-option label="不通过(终审)" :value="7"></el-option>
          <el-option label="已结束" :value="8"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="state.show = false" size="small">取 消</el-button>
        <el-button type="primary" @click="stateSubmit()" size="small">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import issueShow from "./issueShow";
import score from "./score.vue";
export default {
  components: {
    issueShow,
    score,
  },
  data() {
    return {
      list: [],
      // 页码(默认条数,页数,总数量)
      page: {
        size: 10,
        current: 1,
        count: 0,
      },
      // 空列表 存储已经选中的选项
      checkList: [],
      // 搜索
      search: {
        value: "",
        state: "",
        time: [],
        streetId: "",
      },
      // 街道列表
      streetList: [],
      // 整改限时
      time: {
        show: false,
        value: "",
        active: "",
      },
      // 管理员下载
      download: {
        show: false,
        active: "",
      },
      state: {
        show: false,
        value: "",
        active: "",
      },
      user: this.$store.state.user,
      // 加载
      loading: false,
    };
  },
  methods: {
    // 导出考评
    exportEvaluate() {
      window.open("/admin/Index/export_evaluate?type=3");
    },
    // 搜索街道
    searchStreet() {
      this.axios.post("/admin/Index/search_street").then((ref) => {
        var ref = ref.data;
        if (ref.state) {
          this.streetList = ref.other.data;
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
      });
    },
    // 修改检查状态
    checkStateChange(item) {
      var data = {
        check_state: item.check_state ? 1 : 0,
        id: item.id,
        T: "evaluate",
      };
      this.axios.post("/admin/Index/edit_check_state", data).then((ref) => {
        var ref = ref.data;
        if (ref.state) {
          this.common.message({ message: ref.info });
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
      });
    },
    // 修改状态
    stateSubmit() {
      var state = this.state,
        v = state.value,
        a = state.active;
      var data = {
        id: a.id,
        state: v,
      };
      this.axios.post("/admin/Index/edit_state", data).then((ref) => {
        var ref = ref.data;
        if (ref.state) {
          state.show = false;
          this.common.message({ message: ref.info });
          this.searchHandle();
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
      });
    },
    // 修改限时
    timeSubmit() {
      var time = this.time,
        v = time.value,
        a = time.active;
      if (!v) {
        this.common.message({ message: "时间不能为空", type: "error" });
        return false;
      }
      var data = {
        id: a.id,
        expire_time: v,
      };
      this.axios.post("/admin/Index/edit_expire_time", data).then((ref) => {
        var ref = ref.data;
        if (ref.state) {
          time.show = false;

          this.common.message({ message: ref.info });
          this.searchHandle();
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
      });
    },
    // 设置下载时间
    setDownloadTime(item, field) {
      // 管理员加载
      if (field) {
        item.admin_download_time = moment().format("YYYY-MM-DD HH:mm:ss");
      } else {
        // 只要街道和村管理员才添加下载时间
        if (this.user.type == 3 || this.user.type == 4) {
          item.download_time = moment().format("YYYY-MM-DD HH:mm:ss");
        }
      }
    },
    // 整改是否超时
    timeout(item) {
      if (item.state == 2 || item.state == 7) {
        var day = moment().format("YYYY-MM-DD"),
          time = item.expire_time;
        if (new Date(day).getTime() > new Date(time).getTime()) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    // 增加修改
    submit() {
      this.$refs["form.list"].validate((valid) => {
        if (valid) {
          var form = this.form;
          form.state = true;
          var data = { ...form.list };
          data["T"] = "street";
          this.axios.post("/admin/Index/handle", data).then((ref) => {
            var ref = ref.data;
            if (ref.state) {
              this.common.message({ message: ref.info });
              // 关闭弹窗
              form.show = false;
              // 重新搜索
              this.searchHandle();
            } else {
              this.common.message({ message: ref.info, type: "error" });
            }
            // 关闭提交锁定
            form.state = false;
          });
        }
      });
    },
    // 删除选中考评标准
    delStandard(id) {
      var data = {
        T: "choose_standard",
        id: id,
      };
      return this.axios.post("/admin/Index/del", data);
    },
    // 删除选中标准id问题
    delIssue(id) {
      var data = {
        T: "issue",
        id: id,
      };
      return this.axios.post("/admin/Index/del", data);
    },
    // 删除
    del(row) {
      if (row.length == 0) {
        this.common.message({ message: "删除失败,请选择删除项", type: "error" });
      } else {
        this.common.confirm().then(() => {
          let ids = [];
          row.forEach((item) => ids.push(item.id));
          this.axios.post("/admin/Index/del_evaluate", { ids }).then((res) => {
            // 计算总页数
            var n = Math.ceil((this.page.count - row.length) / this.page.size);
            // 更新页码
            if (n && n < this.page.current) this.page.current--;
            // 重新搜索
            this.searchHandle();
            this.common.message({ message: res.info });
          });
        });
      }
    },
    // 清空
    down() {
      this.form.list = {
        title: "",
        user_id: "",
        info: "",
      };
      this.$refs["form.list"].resetFields();
    },
    // 搜索
    searchHandle() {
      // 开启加载
      this.loading = true;
      var s = this.search,
        time = s.time,
        data = {
          state: s.state,
          info: s.value,
          street_id: s.street_id,
          startTime: time ? time[0] : "",
          lastTime: time ? time[1] : "",
          type: 3, //默认查询公厕管护
          // 页码
          page: {
            current: this.page.current,
            size: this.page.size,
          },
        };

      // 查询权限
      var user = this.user;
      // 考评员
      if (user.type == "1") {
        data["user_id"] = user.id;
      }
      // 审核员
      if (user.type == "2") {
        data["auditor_id"] = user.id;
        if (data["state"] === "") {
          data["state"] = "1,2,3,4,5,6,7,8";
        }
      }
      // 街道管理员
      if (user.type == "3") {
        data["street_user_id"] = user.id;
        if (data["state"] === "") {
          data["state"] = "1,2,3,4,5,6,7,8";
        }
      }
      // 村管理员
      if (user.type == "4") {
        data["village_user_id"] = user.id;
        if (data["state"] === "") {
          data["state"] = "1,2,3,4,5,6,7,8";
        }
      }

      this.axios.post("/admin/Index/search_evaluate", data).then((ref) => {
        var ref = ref.data;
        if (ref.state) {
          var data = ref.other.data;

          // 格式化检查状态
          for (var i in data) {
            data[i].check_state = data[i].check_state ? true : false;
          }
          this.list = data;
          this.page.count = ref.other.count;
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
        // 开启加载
        this.loading = false;
      });
    },
    // 当选择框出现改变时
    change(selection) {
      this.checkList = selection;
    },
    // 选中全部
    checkAll() {
      this.list.forEach((row) => {
        this.$refs.selects.toggleAllSelection(row);
      });
    },
    // 页码改变
    pageChange(val) {
      this.page.current = val;
      this.searchHandle();
    },
  },
  created() {
    this.searchStreet();
    this.searchHandle();
  },
};
</script>
<style scoped>
.search {
  float: right;
}

.search .input {
  width: 200px;
  margin-right: 10px;
}

/* 表格详情 */
.list .details li {
  width: 33.333%;
  float: left;
  line-height: 40px;
}

.list .details li::after {
  content: "";
  clear: both;
  display: block;
}

.list .details li p {
  float: left;
  margin: 0;
}

.list .details li p:nth-of-type(1) {
  color: #99a9bf;
  width: 100px;
  text-align: right;
  padding-right: 30px;
  box-sizing: border-box;
}

.list .details li p:nth-of-type(2) {
  color: #666;
  font-weight: bold;
}

/* 整改限时 */
.list .edit-time {
  cursor: pointer;
  margin-left: 10px;
}
</style>